export const detail = {
    header: `
  ## \`测试组件，请谨慎使用\`
  # PrizeSudoku 
  
  > 九宫格实现是基于
  `,
    codeExample: [
      {
        title: '### 类型 / 尺寸 / 状态',
        code: `
import React from 'react';
import './prizeSudoku.scss'
import PrizeSudoku from '../../components/PrizeSudoku/prizeSudoku'

class PrizeSudokuPage extends React.Component<any, any> {

    constructor(props: any) {
        super(props)
        
        this.state = {
            data: [],
            value: 2
        }
    }
    
    componentDidMount() {
        setTimeout(() => {
            this.setState({
                data: [
                    {
                        title: '滴滴出行 快车 20元券',
                        img: './imgs/present_01.jpg',
                    },
                    {
                        title: 'COSTA 折扣服务券 30元',
                        img: './imgs/present_02.jpg',
                    },{
                        title: '猫眼电影 电影代金券 20元',
                        img: './imgs/present_03.jpg',
                    },{
                        title: '谢谢参与',
                        img: <img src="./imgs/present_04.jpg" alt=""/>,
                    },{
                        title: '',
                        img: './imgs/btn_lottery.jpg',
                    },{
                        title: '哈根达斯 折扣服务券 35元',
                        img: './imgs/present_06.jpg',
                        id: '1'
                    },{
                        title: '必胜客 折扣服务券 50元',
                        img: './imgs/present_07.jpg',
                    },{
                        title: '鲜丰水果 优惠服务券 20元',
                        img: './imgs/present_08.jpg',
                    },{
                        title: '网易云音乐 黑胶VIP 3个月',
                        img: './imgs/present_09.jpg',
                    }
                ]
            })
        }, 1500)
    }

    lottery = async() => await new Promise<any>((resolve, reject) => {
        setTimeout(() => {
            let awardIndex = Math.floor(Math.random()* 9)
            console.log(awardIndex)
            resolve({
                flag: true,
                index: awardIndex
            })
        }, 1000)
    })
    
    
    render() {
        return (
                <div>
                    <div className="phone_prizeSudoku" style={{padding: '7vw 5vw 10vw', background: '#fff'}}>
                        <PrizeSudoku 
                            onClick={this.lottery}
                            data={this.state.data}
                        />
                    </div>
                </div>
        );
    }
}

export default PrizeSudokuPage;
`,
description: `
## Tips：

使用该组件的时候请注意以下几点：

    1、抽奖点击由于使用了Promise函数，所以在点击过后，无论如何都应该最后返回一个对象为 { flag, index } 的对象给组件。当抽奖错误或者接口错误时，也应该返回对象，如 { flag: false, index: -1}

    2、传入的data是按照一排二排三排，从左往右的渲染顺序，且需要传入长度为9的数组（包括中间的点击按钮）；

    3、中奖的index传入设置的data对应的index即可
`
      },

    ],
    pramsDetail: `
----

### 参数设置

| 参数 / params | 描述 / description  | 类型 / type | 默认值 / default |
| ------------- | -------------- | ---------------- | ---------------- |
| className | 控制按钮内图标样式，传入组件库封装的 \`Icon\`组件，详情见\`Icon\`组件 | \`<Icon />\` | \`无\` |
| style | 样式，与React一致 | \`React.CSSProperties\` | \`无\` |
| size | 组件大小，参数可选： \`'sm' 丨 'md' 丨 'lg'\` | \`string\` | \`md\` |
| className | class类名，与React一致 | \`string\` | \`无\` |
| data | 传入奖项数据，数据参数限制：\`title\` （必传） \`img\`（可选） \`txtColor\`（可选） | \`string\` 丨 \`string\`或 \`<img />\` 丨 \`string\` | \`无\` |
| successFun | 抽奖后动画结束回调，\`({award}) => void\` | \`Function\` | \`无\` |
| failedFun | 抽奖后动画结束回调，\`() => void\` | \`Function\` | \`无\` |
`
  }
  